<template>
    <el-row class="m-proposal">
        <el-row class="layout-1">
            <el-form :model="searchFrom.data" :inline="true" class="form" label-width="80px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="活动编号">
                            <el-input v-model="searchFrom.data.activityPeriods"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="活动名称">
                            <el-input v-model="searchFrom.data.activityName" placeholder="支持模糊查询"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="活动类型">
                            <el-select v-model="searchFrom.data.activityType" placeholder="请选择活动类型">
                                <el-option
                                        v-for="item in searchFrom.itemOptions.actType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="启用状态">
                            <el-select v-model="searchFrom.data.enableFlag" placeholder="请输入">
                                <el-option label="启用" value="启用"></el-option>
                                <el-option label="禁用" value="禁用"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="active">
                <el-col
                        class="activeBtn"
                        :span="6"
                        :offset="18"
                >
                    <el-button type="primary" icon="search" @click="search">查找</el-button>
                    <el-button type="danger" icon="delete" @click="emptySearchItem">重置</el-button>
                </el-col>
            </el-row>
        </el-row>
        <div class="layout-2">
            <el-row class="item-1">
                <el-button icon="edit" @click="changeData">修改</el-button>
                <el-button icon="document" @click="reloadData">刷新</el-button>
            </el-row>
            <el-row class="item-2">
                <el-table
                        class="table"
                        :data="tableData.list"
                        ref="multipleTable"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        @sort-change="sortData"
                        border
                        style="width: 100%"
                >
                    <el-table-column
                            show-overflow-tooltip= "true"
                            type="index"
                            fixed
                            width="50">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="activityPeriods"
                            label="活动编号"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="activityName"
                            label="活动名称"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="activityTypeStr"
                            label="活动类型"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="startTime"
                            label="活动开始时间"
                            min-width="200">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="endTime"
                            label="活动结束时间"
                            min-width="200">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="zip"
                            label="是否启用"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip="true"
                            prop="createUser"
                            label="创建用户"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            sortable
                            show-overflow-tooltip="true"
                            prop="updateDate"
                            label="最后更新时间"
                            width="200">
                    </el-table-column>
                </el-table>
                <el-pagination
                        v-if=" this.tableData.totalnum "
                        class="pagination"
                        @size-change="handleSizeChange"
                        :current-page="currentPage4"
                        :page-sizes="[20, 40, 100, 200]"
                        :page-size="20"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.totalnum">
                </el-pagination>
            </el-row>
        </div>
        <!--弹窗-->
        <el-dialog title="新增活动" :visible.sync="dialogData.isShow" class="m-proposalAdddata" size="small">
            <el-form ref="periodForm" :model="dialogData.data" :inline="true">
                <el-row class="row">
                    <el-col :span="4" class="label">
                        活动编号*
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.activityPeriods" placeholder=""></el-input>
                    </el-col>
                    <el-col :span="4" class="label">
                        活动名称*
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.activityName" placeholder=""></el-input>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">
                        活动日期*
                    </el-col>
                    <el-col :span="8">
                        <el-date-picker
                                class="select"
                                v-model="dialogData.data.time"
                                type="datetimerange"
                                placeholder="选择日期范围">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4" class="label">
                        活动类型*
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="dialogData.data.activityType" placeholder="请选择活动类型" class="select">
                            <el-option
                                    v-for="item in searchFrom.itemOptions.actType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">
                        活动完成天数*
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.finishDays" placeholder="">
                            <template slot="append">天</template>
                        </el-input>
                    </el-col>
                    <el-col :span="4" class="label">
                        赠金有效期
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.withGoldDays" placeholder="">
                            <template slot="append">天</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">
                        代币有效期
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.coinDays" placeholder="">
                            <template slot="append">天</template>
                        </el-input>
                    </el-col>
                    <el-col :span="4" class="label">
                        模拟账号保留金额
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.demoKeepAmount" placeholder="">
                            <template slot="append">元</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="4" class="label">
                        最高兑换次数
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="dialogData.data.maxExchangeCount" placeholder="">
                            <template slot="append">天</template>
                        </el-input>
                    </el-col>
                    <el-col :span="4" class="label">
                        是否启用
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="dialogData.data.enableFlag" placeholder="请输入" class="select">
                            <el-option label="启用" value="Y"></el-option>
                            <el-option label="禁用" value="N"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogData.isShow = false">取 消</el-button>
                <el-button type="primary" @click="changeDataList">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
    import axios from "axios";
    import cgi from "conf/cgi";
    export default {
        data(){
            return {
                searchFrom: {
                    data: {
                        activityPeriods: null,
                        activityName: null,
                        activityType: null,
                        pno: null,
                        proposalStatus: null,
                        enableFlag: null
                    },
                    itemOptions: {
                        actType: [{
                            value: '1',
                            label: '黄金糕'
                        }, {
                            value: '2',
                            label: '双皮奶'
                        }, {
                            value: '3',
                            label: '蚵仔煎'
                        }, {
                            value: '4',
                            label: '龙须面'
                        }, {
                            value: '5',
                            label: '北京烤鸭'
                        }
                        ]
                    }
                },
                tableData: {
                    "totalnum": null,
                    "ps": null,
                    "p": null,
                    list: [],
                },
                activeData: null,
                dialogData: {
                    isShow: false,
                    data: {
                        activityPeriods: null,
                        activityName: null,
                        time: null,
                        activityType: null,
                        finishDays: null,
                        withGoldDays: null,
                        coinDays: null,
                        demoKeepAmount: null,
                        maxExchangeCount: null,
                        enableFlag: null
                    }
                },
            }
        },
        methods: {
            handleCurrentChange(val) {
                console.log(val)
                this.activeData = val;
            },
            /*新增*/
            addData(){
                for (let item in this.dialogData.data) {
                    this.dialogData.data[item] = null;
                }
                this.$refs.multipleTable.setCurrentRow();
                this.dialogData.isShow = true;
            },
            /*表单排序*/
            sortData(column){
                console.log(column)
            },
            /*修改*/
            changeData(){
                if (!this.activeData) {
                    this.$alert('请先选择要操作的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                for (let item in this.dialogData.data) {
                    this.dialogData.data[item] = this.activeData[item];
                }
                this.dialogData.isShow = true;
            },
            /*审批通过*/
            passData(){
                if (!this.activeData) {
                    this.$alert('请先选择要操作的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm('确定要审批通过该记录吗？', '温馨提示', {})
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '审批通过成功!'
                        })
                    })
                    .catch(() => {

                    })
            },
            /*  取消*/
            cancelData(){
                if (!this.activeData) {
                    this.$alert('请先选择要操作的记录！', '温馨提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm('确定要取消该记录吗？', '温馨提示', {})
                    .then(() => {
                        this.tableData.list.splice(0, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    })
                    .catch(() => {

                    })
            },
            /*刷新*/
            reloadData(){
                this.queryTableData({
                    page: 1,
                    rows: 20,
                    sort: "updateDate",
                    order: "desc"
                })
            },
            /*查询表格数据*/
            queryTableData(queryData){
                return axios.post(cgi.proposalQueryDataList, queryData)
                    .then(res => {
                        if (res.code == 0) {
                            this.tableData = res.data;
                            return res.data;
                        } else {
                            return Promise.reject("请求数据失败!");
                        }
                    }, error => {
                        return Promise.reject(error.msg);
                    });
            },
            /*新增或者修改表单数据*/
            changeDataList(){

            },
            /*清空搜索输入*/
            emptySearchItem(){
                for (let item in  this.searchFrom.data) {
                    this.searchFrom.data[item] = null;
                }
            },
            /*搜索*/
            search(){
                this.queryTableData({
                    page: 1,
                    rows: 20,
                    sort: "updateDate",
                    order: "desc"
                });
            }
        },
        created() {
            /* this.queryTableData({
             page: 1,
             rows: 20,
             sort: "updateDate",
             order: "desc"
             })*/
        }
    }
</script>
<style lang="sass" type="text/scss">
    @import "../../../../sprites/_variable";
    .m-proposal {
        .layout-1 {
            background-color: #fff;
            margin-bottom: 10px;
            border: solid 1px $border-colorA;
            padding-top: 15px;
            .form {
                padding: 0 15px;
            }
            .active {
                border-top: solid 1px $border-colorA;
                padding: 15px;
                .activeBtn {
                    text-align: right;
                }
            }
        }
        .layout-2 {
            padding: 15px;
            //overflow: hidden;
            min-height: 440px;
            background-color: #fff;
            border: solid 1px $border-colorA;
            .item-1 {
                padding-bottom: 15px;
            }
            .item-2 {
                position: relative;
                height: auto;
                border: solid 1px $border-colorA;
                .pagination {
                    padding: 10px 0;
                }
                .current-row {
                   td {
                       background-color: #7D9D91;
                   }
                }
            }
        }
    }

    .m-proposalAdddata {
        .row {
            margin-bottom: 20px;
            line-height: 2.3;
            .select {
                width: 100%;
            }
            .label {
                text-align: right;
                padding-right: 10px;
            }
        }
    }
</style>